<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back()"></div>
      <div class="name">精选</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>

    <div 
    	class="featured-list"
    	v-infinite-scroll="loadBottom"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
    	<router-link :to="{path:'/bookdetails/'+item.novel_id}" v-for="(item,index) in list" class="featured-item">
    		<div class="featured-tt">{{item.title}}</div>
    		<div class="featured-img">
              <img :src="item.pic ? item.pic : errorJxDefaultImg" :onerror="errorJxDefaultImg" class="item-l">
    		</div>
    		<div class="featured-desc">{{item.intro}}</div>
    		<div class="featured-view">阅读全文</div>
        </router-link>
    </div>
    <div class="loadmore-down">
        <span>{{loadNoData ?'暂无更多数据了!' : '加载中...'}}</span>
    </div>

    <!-- 底部 -->
    <web-footer active="my"></web-footer>
  </div>
</template>
<script>
	import JxDefaultImg from '@/assets/images/featured.jpg';
	import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'godBook',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:[],
      			loading:false,
      			page:0,
      			loadNoData:false,
				errorJxDefaultImg:'this.src="' + JxDefaultImg + '"',
	      	}
	    },
	    created(){
			
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
	      	loadBottom(){
	      		this.loading = true;
	      		this.$axios.post(
	      			this.$store.state.url+"article_list?device_sn="+this.$store.state.device,
	      			{device_sn:this.$store.state.device,offset:this.list.length,limit:5}).then(res=>{

                        this.list = this.list.concat(res.data.list);
	      				if(res.data.list.length>=5){
					    	console.log(res.data);
					    	this.loading = false;
					    	++this.page;
	      				}else{
	      					this.loadNoData = true;
	      				}
			    });
	      	}
	    }
  	}
</script>
<style lang="scss" scoped>
	.featured-list{
		background: #f5f5f5;
		.featured-item{
			margin-bottom:20px;
			padding:30px;
			position: relative;
			background-color:#fff;
			display: block;
			.featured-tt{
				font-size:36px;
				color:#000;
				line-height:90px;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				font-weight: normal;
				color:#333;
			}
			.featured-img{
				margin-bottom:20px;
			}
			.featured-desc{
				font-size:30px;
				line-height: 1.8;
				color:#999999;
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3; 
			}
			.featured-view{
				color:#555555;
				font-size:30px;
				position: relative;
				margin-top:20px;
				&:after{
					content:'';
					position:absolute;
					top:50%;
					right:0;
					width:40px;
					height:40px;
					margin-top:-20px;
					background:url(../assets/images/icon/r-icon2.png) no-repeat 0 0/100% auto;
				}
			}
		}
        .featured-item:last-child{
            margin-bottom:0;
        }
	}
</style>
